<template>
  <div class="page">
    <h2>示例 - 空数据</h2>
    <vue-tabulation
      ref="grid"
      :dataSource="dataSource"
      :columns="transformColumns"
      :height="500"
      :hasIndex="true"
      :hasCheckbox="true"
      showSummary
      @click="handleClick"
      @header-click="handleClick"
    ></vue-tabulation>
    <p>
      <button @click="update">refresh</button>
    </p>
  </div>
</template>

<script>
export default {
  name: 'demo-no-data',
  data() {
    return {
      ageFixed: false,
      dateFixed: false,
      dataSource: [],
      columns: [],
    }
  },
  computed: {
    transformColumns() {
      return this.columns.map(item => {
        if (item.prop === 'age') {
          item.fixed = this.ageFixed
        }
        if (item.prop === 'date') {
          item.fixed = this.dateFixed
        }
        // item.width = undefined
        return item
      })
    },
  },
  created() {
    this.getUI().then(columns => {
      this.columns = columns
      console.log('columns loaded')
      this.getData().then(data => {
        this.dataSource = data
        console.log('data loaded')
      })
    })
  },
  methods: {
    getUI() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(this.$mock.columns())
        }, 200)
      })
    },
    getData() {
      return new Promise(resolve => {
        setTimeout(() => {
          // resolve(this.$mock.dataSource(100))
          resolve([])
        }, 300)
      })
    },
    update() {
      this.getData().then(data => {
        this.dataSource = data
        console.log('data loaded')
      })
    },
    handleClick() {
      console.log(arguments)
    },
  },
}
</script>
